<template>
  <div style="margin:0;padding:0;">
    <div>
      <div class="Zt"
           style="width: 100%; height: 100%;"
      >
        <div class="div" v-for="(item,index) in kfList" :key="index">
          <dict-tag :options="dict.type.kf_zt" :value="item.kfZt"/>

          <div
            style="
              font-size: 30px;
              font-weight: bold;
              font-family: '楷体';
              text-align: center;
              margin: 30px auto;
              margin-top:40px;
              color:#000000;
            "
          >
            {{ item.fx }}
          </div>
          <div            style="
              font-size: 20px;
              font-family: '楷体';
              text-align: center;
              color:#ffffff;
            ">
            房间号: {{item.fjh}}
          </div>


          <span
            style="
              position: relative;
              bottom: -30px;
              display: inline-block;
              margin: auto 10px auto 20px;
              font-size: 20px;
              font-family: '仿宋';
              font-weight: bold;
               color:#fff;
            "
          >价格：</span
          >
          <span
            style="
              position: relative;
              bottom: -30px;
              display: inline-block;
              margin: auto auto auto 5px;
              font-size: 20px;
              font-family: '仿宋';
              color:#fff;
              font-weight: bold;
            "
          >{{ item.jg }}元</span
          >
          <span
            style="
              position: relative;
              bottom: -30px;
              display: inline-block;
              margin: auto auto auto 5px;
              font-size: 20px;
              font-family: '仿宋';
              color:#fff;
              font-weight: bold;
            "
          ><el-button @click="yyDj(item)" v-if="item.kfZt == '空闲'" type="primary">立即预约</el-button></span
          >
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <ZxYd ref="zxYd"/>
  </div>
</template>

<script>
import {listKfgl} from "@/api/jdgl/kfgl";
import ZxYd from "@/views/sy/components/ZxYd.vue";

export default {
  name: "index",// 首页
  components: {ZxYd},
  provide() {
    return {
      updateYy: () => {
        this.getList();
      }
    }
  },
  dicts: ['kf_zt', 'fx'],
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10000,
        fx: null,
        fjh: null,
        kfZt: null,
        userId: null,
        deptId: null
      },
      loading: false,
      total: 0,// 总条数
      kfList: [],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询客房列表 */
    getList() {
      this.loading = true;
      listKfgl(this.queryParams).then(response => {
        this.kfList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    yyDj(item) {
      this.$refs.zxYd.handleOpen(item);
    }

  }
}
</script>

<style scoped>
.Zt {
  display: grid;
  grid-gap: 1rem; /* 控制网格项之间的间距 */
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  justify-items: center; /* 水平居中对齐 */
}
.div {
  width: 300px; /* 设置固定的宽度 */
  max-width: calc(100% - 2rem); /* 确保在小屏幕上卡片不会超出容器 */
  height: 200px;
  background-image: url("../../assets/images/jd.png");
  opacity: 0.8; /* 设置透明度为50% */
  transition: transform 0.3s;
  background-size: 100%;
  margin: 21px auto auto;
  border-radius: 10px;
  box-sizing: border-box; /* 确保padding和border包含在width内 */
}
.el-tag {
  width: 60px;
  height: 30px;
  line-height: 30px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin: 10px 200px auto 14px;
  color: #999898;
}
</style>
